<template>
    <div>
        <i @click="visible=true" class="icon-theme iconfont"></i>
        <el-dialog
            append-to-body
            :visible.sync="visible"
            title="主题"
            width="50%">
            <el-radio-group
                :value="theme"
                @input="changeTheme($event)"
                class="list">
                <el-radio border v-for="item in list" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
            </el-radio-group>
        </el-dialog>
    </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
    name: "theme",
    computed: {
        ...mapGetters([
            'theme'
        ])
    },
    mounted() {
        document.body.className = this.theme
    },
    methods:{
        changeThemeColor(v){
            this.$store.commit('user/SET_THEME', v)
            document.body.className = v
        },
        changeTheme(v){
            this.$store.commit('user/SET_THEME', v)
            if(v.includes('default')){
                this.$emit('change')
            }
            document.body.className = v
        }
    },
    data(){
        return {
            visible:false,
            list: [
                {
                    name: '默认',
                    value: 'theme-default'
                },
                {
                    name: '炫彩',
                    value: 'theme-star'
                }
            ]
        }
    }
}
</script>

<style scoped>
    .icon-theme {
        font-size: 20px;
    }
</style>